<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>150_复制节点</title>
	</head>
	<body>
		<button>点我一下</button>
		<ul id="list1">
			<li id="l1">孙悟空</li>
			<li id="l2">猪不戒</li>
			<li id="l3">沙和尚</li>
		</ul>
		<ul id="list2">
			<li>蜘蛛精</li>
		</ul>

		<script>
			/* 点击按钮后，将id为l1的元素添加list2中 */
			const bnt2 = document.getElementsByTagName("button")[0]
			const list2 = document.getElementById("list2")
			const l1 = document.getElementById("l1")
			bnt2.onclick = function() {
				//list2.insertAdjacentElement("afterbegin", l1)
				let newL1 = l1.cloneNode() //用来对节点进行复制的
				/* 使用 cloneNode()方法对节点进行复制时，它会复制节点的所有特点包括各种属性,如id属性。
						这个方法默认只会复制当前节点，而不会复制节点的子节点。
						可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制
				 */
				newL1 = l1.cloneNode(true)
				newL1.id = "22" //手动修改id
				list2.insertAdjacentElement("beforeend", newL1)
			}
		</script>
	</body>
</html>